<template>
   <div>
     <div class="title">
       <h3>订单详情</h3>
     </div>
     <div class="infobox">
       <img :src="order.imgSrc" alt="">
       <div class="info">
         <h4>{{order.proName}}</h4>
         <p>￥<span>{{order.price}}</span></p>
         <span>x{{order.count}}</span>
       </div>
     </div>
     <div class="orderinfo">
       <ul>
         <li>订单编号: <span>{{order.orderNum}}</span>
           <button
           v-clipboard:copy="order.orderNum"
           v-clipboard:success="onCopy"
           >复制</button></li>
         <li>下单时间: <span>{{order.orderTime}}</span></li>
         <li v-if="order.payTime.length > 0">支付时间: <span>{{order.payTime}}</span></li>
         <li>配送方式: <span>普通方式</span></li>
         <li v-if="order.trackNum">物流号: <span>{{order.trackNum}}</span> <button
           v-clipboard:copy="order.trackNum"
           v-clipboard:success="onCopy"
           >复制</button></li>
       </ul>
     </div>
     <div class="price">
       <ul>
         <li>
           <p>商品总额</p>
           <span>￥{{order.totalPrice}}</span>
         </li>
         <li>
           <p>运费</p>
           <span>￥0</span>
         </li>
         <li class="allprice">
           <p v-if="order.raw.status == 0">应付款：<span>￥{{order.totalPrice}}</span></p>
           <p v-else>实付款：<span>￥{{order.totalPrice}}</span></p>
         </li>
         <li>

           <button v-if="order.raw.status == 0" class="buy" @click="onPay()">立即支付</button>
           <button v-else class="buy" @click="onBuyAgain()">再次购买</button>
         </li>
       </ul>
     </div>
   </div>
</template>

<script>
import Order from '../api/order/order';

export default {
  name: 'y-order-detail',
  data(){
    return {
      order: {
        // oid: 5,
        // status: 1,
        // itemName: '待付款',
        // orderNum: '201903272345345',  //订单号
        // orderTime: '2019-03-12 11:22:56',  //下单时间
        // payTime: '2019-03-12 16:22:56',    //支付时间
        // proName: 'iPhone XS全面屏智能学生老人拍照手机全面屏智能学生老人拍照手',  //产品名称
        // imgSrc: '../../static/images/1.jpg',
        // price: 6565.00,
        // count: 2,
        // trackNum: '21345323',   //快递单号
      }
    }
  },

  mounted() {
    this.initOrder(this.$route.query.id);
  },

  methods: {
    async initOrder(orderId) {
      const order = await Order.getOrderDetail(orderId);
      this.order = Order.orderAdaptor(order);
    },

    onBuyAgain() {
      this.$router.push({
        path: '/detail',
        query: {id: this.order.raw.goods_id}
      })
    },

    onCopy() {
      alert('复制成功');
    },

    onPay() {
      const orderId = this.order.oid
      Order.payForOrder(orderId, res => {
        alert('支付成功');
        setTimeout(() => {
          this.initOrder(orderId);
        }, 1000);
      })
    },
  }
}
</script>

<style scoped>
.title {
  height: 1.4rem;
  -webkit-box-shadow: 0 1px 3px #cddcdc;
  -moz-box-shadow: 0 1px 3px #cddcdc;
  box-shadow: 0 1px 3px #cddcdc;
}
.title h3{
  height: 1.4rem;
  line-height: 1.4rem;
  text-align: center;
  color: #000;
  font-size: .42rem;
}
.infobox{
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  padding: .5rem .3rem;
  border-bottom: .2rem solid #f1f1f1;
}
.infobox img{
  display: block;
  width: 2.2rem;
  height: 2.2rem;
  margin-right: .3rem;
  flex-shrink: 0;
  border: 1px solid #c6c6c6;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.infobox .info{
  flex-grow: 1;
}
.infobox .info h4{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 1.04rem;
  line-height: .52rem;
  font-size: .38rem;
  color: #333;
}
.infobox .info p{
  color: #555;
  font-size: .34rem;
  margin-top: .1rem;
}
.infobox .info p span{
  font-size: .42rem;
}
.infobox .info span{
  font-size: .34rem;
  color: #555;
}
.orderinfo{
  padding: .3rem;
  border-bottom: .2rem solid #f1f1f1;
}
.orderinfo li{
  line-height: .8rem;
  color: #333;
  font-size: .37rem;
}
.orderinfo li span{
  margin-left: .2rem;
  color: #777;
  font-size: .34rem;
}
.orderinfo li button{
  display: inline-block;
  margin-left: .2rem;
  padding: 1px .24rem;
  border: 1px solid #d1d1d1;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  background: #fff;
  font-size: .33rem;
}
.price{
  padding: .3rem;
  margin-bottom: 1rem;
}
.price li{
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  line-height: .8rem;
}
.price li p{
  font-size: .37rem;
  color: #333;
}
.price li>span{
  color: #333;
  font-size: .36rem;
}
.price li.allprice{
  justify-content: flex-end;
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: .2rem;
}
.price li.allprice span{
  color: #f00;
  font-weight: bold;
}
.price li:last-child{
  margin-top: .4rem;
  justify-content: flex-start;
}
.price li button{
  height: .7rem;
  line-height: .7rem;
  padding: 0 .3rem;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  font-size: .35rem;
}
.price li .del{
  background: #fff;
  border: 1px solid #d1d1d1;
}
.price li .buy{
  background: #f00;
  color: #fff;
  border: none;
  margin-right: .3rem;
}
.aaa{

}

</style>
